/**
 * Created by Scott on 2017/3/30.
 */
import React, { Component } from 'react';

import { Modal, Form, Input } from 'antd';
import MenuTreeSelector from './MenuTreeSelector';


const FormItem = Form.Item;

class MemuModal extends Component {

    constructor ( props ) {
        super(props);
        this.state = {
            visible: false
        };
        this.hideModalHandler = this.hideModalHandler.bind(this);
        this.showModalHandler = this.showModalHandler.bind(this);
        this.okHandler = this.okHandler.bind(this);
        this.onSelectHandle = this.onSelectHandle.bind(this);
    }

    hideModalHandler () {
        this.setState({
            visible: false
        });
    }

    showModalHandler () {
        this.setState({
            visible: true
        });
    }

    okHandler () {
        this.props.form.validateFields(( err, values ) => {
            if (!err) {
                console.log(values);
                this.props.modalOk(values);
                this.hideModalHandler();
            }
        })
    }

    onSelectHandle (value) {
        console.info('选择了' + value);
    }

    render () {

        const {getFieldDecorator} = this.props.form;

        const {menuName, url,id} = this.props.record;

        const formItemLayout = {
            labelCol: {
                span: 6
            },
            wrapperCol: {
                span: 14
            }
        };

        const titleName = this.props.modelType === 'add' ? '新增菜单信息' : this.props.modelType === 'edit' ? '编辑菜单信息' : null;
        return (

            <span>
                <span onClick={ this.showModalHandler }>{ this.props.children }</span>
                <Modal
                    title={titleName}
                    visible={ this.state.visible }
                    onOk={ this.okHandler }
                    onCancel={ this.hideModalHandler }>
                    <Form
                        onSubmit={ this.okHandler }>
                        <FormItem
                            {...formItemLayout}
                            label="父菜单">
                            { getFieldDecorator('parent', {})(<MenuTreeSelector initValue={id}
                                onSelect={this.onSelectHandle}/>) } </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="菜单名称">
                            { getFieldDecorator('menuName', {
                                initialValue: menuName
                            })(<Input />) } </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="URL">
                            { getFieldDecorator('url', {
                                initialValue: url
                            })(<Input />) } </FormItem>
                    </Form>
                </Modal>
            </span>
        );
    }

}

export default Form.create()(MemuModal);